<template>
	<view class="container">
		<u-navbar title="师资详情" @rightClick="rightClick" :autoBack="true"> </u-navbar>
		<!-- 顶部区域 -->
		<view class="header">
			<image :src="avatar" class="avatar" mode="aspectFill"></image>
			<view class="info">
				<text class="name">周深</text>
				<view class="tags">
					<text class="tag">倾听印象 | 关键词</text>
				</view>
			</view>
			<button class="follow-btn" @click="handleFollow">
				+ 关注
			</button>
		</view>

		<!-- 个人故事 -->
		<view class="section story">
			<text class="section-title">我与心理学</text>
			<text class="content">
				作为拥有10年职场经验的倾听师，我在接触心理学后发现...（故事内容）
			</text>
		</view>

		<!-- 专业背景 -->
		<view class="section education">
			<text class="section-title">我的专业背景</text>
			<view v-for="(item, index) in educationList" :key="index" class="edu-card">
				<text class="edu-title">{{item.title}}</text>
				<text class="edu-subtitle">{{item.subTitle}}</text>
				<view v-for="(content, i) in item.content" :key="i" class="edu-content">
					{{content}}
				</view>
			</view>
		</view>

		<!-- 擅长领域 -->
		<view class="section skills">
			<text class="section-title">我擅长的领域</text>
			<view class="tags-wrapper">
				<view v-for="(tag, index) in skillTags" :key="index" class="skill-tag">
					{{tag}}
				</view>
			</view>
		</view>

		<!-- 留言区 -->
		<view class="section message">
			<text class="section-title">我想对你说</text>
			<text class="content">
				你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好。
			</text>
		</view>

		<!-- 底部按钮 -->
		<view class="footer">
			<button class="action-btn" @click="handleConsult">
				立即倾诉
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatar: 'https://lesson.iapeap.com/2023/szrz/18195904517/bd90818d16804b13b9100cb2bc5ce219.jpg',
				educationList: [{
						title: '英国埃塞克斯大学',
						subTitle: '精神分析硕士 | 博士候选人',
						content: [
							'2015-2018 完成硕士课程',
							'持续进行博士课题研究'
						]
					},
					{
						title: '伦敦塔维斯多克诊所',
						subTitle: '长程系统培训',
						content: [
							'2018-2020 完成2年系统培训',
							'主攻家庭治疗方向'
						]
					}
				],
				skillTags: ['婚恋关系', '亲子教育', '个人成长', '情绪管理']
			}
		},
		methods: {
			handleFollow() {
				uni.showToast({
					title: '关注成功'
				})
			},
			handleConsult() {
				uni.navigateTo({
					url: '/pages/consult/consult'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 70px 20px;
		box-sizing: border-box;
		background: #f8f9fa;
		min-height: 100vh;
		padding-bottom: 80px;
	}

	.header {
		display: flex;
		align-items: center;
		padding: 30rpx;
		box-sizing: border-box;
		background: white;
		border-radius: 16rpx;
		margin-bottom: 20rpx;

		.avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			border: 4rpx solid #e3f2fd;
			margin-right: 20rpx;
		}

		.info {
			flex: 1;

			.name {
				font-size: 36rpx;
				font-weight: bold;
				display: block;
				margin-bottom: 10rpx;
			}

			.tags {
				.tag {
					background: #e3f2fd;
					padding: 6rpx 12rpx;
					box-sizing: border-box;
					border-radius: 20rpx;
					font-size: 24rpx;
					color: #666;
				}
			}
		}

		.follow-btn {
			width: 120rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 24rpx;
			background: #2a82e4;
			color: white;
			border-radius: 30rpx;
			padding: 0;
		}
	}

	.section {
		background: white;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-sizing: border-box;

		&-title {
			font-size: 36rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
			padding-bottom: 10rpx;
			border-bottom: 2rpx solid #e3f2fd;
			display: block;
		}

		.content {
			font-size: 28rpx;
			color: #333;
			line-height: 1.8;
			display: block;
			text-indent: 2em;
		}

		.edu-card {
			padding: 20rpx;
			margin-bottom: 20rpx;
			border-left: 4rpx solid #2a82e4;
			background: #f8f9fa;
			border-radius: 8rpx;
			box-sizing: border-box;

			.edu-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #2a82e4;
				margin-bottom: 10rpx;
			}

			.edu-subtitle {
				font-size: 28rpx;
				color: #666;
				margin-bottom: 15rpx;
				display: block;
			}

			.edu-content {
				font-size: 26rpx;
				color: #666;
				line-height: 1.6;
				position: relative;
				padding-left: 15rpx;

				&::before {
					content: '•';
					position: absolute;
					left: 0;
					color: #2a82e4;
				}
			}
		}

		.tags-wrapper {
			display: flex;
			flex-wrap: wrap;
			gap: 16rpx;

			.skill-tag {
				padding: 12rpx 24rpx;
				background: #f0f8ff;
				color: #2a82e4;
				border-radius: 30rpx;
				font-size: 26rpx;
				box-sizing: border-box;
			}
		}

		.message-input {
			width: 100%;
			height: 200rpx;
			border: 2rpx solid #e3f2fd;
			border-radius: 8rpx;
			padding: 20rpx;
			margin-top: 20rpx;
			font-size: 28rpx;
			box-sizing: border-box;
		}
	}

	.footer {
		position: fixed;
		bottom: 40rpx;
		left: 30rpx;
		right: 30rpx;

		.action-btn {
			height: 90rpx;
			line-height: 90rpx;
			font-size: 32rpx;
			background: linear-gradient(90deg, #2a82e4, #40a9ff);
			color: white;
			border-radius: 45rpx;
			padding: 0;
			box-sizing: border-box;
		}
	}
</style>